<script setup lang="ts">
const show = defineModel<boolean>({ required: true })
</script>

<template>
  <Transition
    leave-active-class="animate__animated animate__faster animate__fadeOut"
    enter-active-class="animate__animated animate__faster  animate__fadeIn"
  >
    <div v-if="show" class="fullscreen-modal box-border">
      <slot />
    </div>
  </Transition>
</template>

<style lang="scss">
.fullscreen-modal {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 99;
  & > div {
    background: #fff;
  }
}
html.dark {
  .fullscreen-modal > div {
    background-color: var(--el-bg-color-overlay);
    border: 1px solid #435d80;
    box-shadow: 0 0 35px rgba(85, 144, 242, .35) inset;
    border-radius: 6px 8px;
  }
}
</style>
